<template>
	<page-container :isback="true" :shownav="true" navtitle="建议详情" :istabbox="false">
		<view class="suggestion-info-root">
			<view class="user-info-container">
				<user-container :user-info="suggestionInfo"></user-container>
				<view class="txt-container" style="padding: 0;">
					<view class="title-container">
						{{ suggestionInfo.suggestTitle }}
					</view>
					<view class="content-txt-container text-content" style="text-indent: 0;">
						建议提交人：{{ suggestionInfo.representativeName }}
					</view>
					<view class=" content-txt-container text-content" style="text-indent: 0;">
						职务：{{ suggestionInfo.representativeDuty }}
					</view>
					<view class="content-txt-container text-content" style="text-indent: 0;">
						电话：{{ suggestionInfo.representativePhone }}
					</view>
					<view class="content-txt-container text-content" style="text-indent: 0;">
						内容：{{ suggestionInfo.suggestContent }}
					</view>
				</view>
			</view>


			<!-- <view class="txt-container">
				<view class="title-container">
					{{ suggestionInfo.suggestTitle }}
				</view>
				<view class="content-txt-container text-content">
					{{ suggestionInfo.suggestContent }}
				</view>
			</view> -->

			<view class="txt-container">
				<view class="title-container">
					建议状态： {{ suggestionInfo.suggestGroupStatus }}
				</view>
				<view class="content-txt-container sub-list-container">
					<view class="sub-item" v-for="(item,index) in suggestionStatusInfo" :key="index">
						<view class="sub-title">
							{{ item.label }}
						</view>
						<view class="sub-value">
							{{ suggestionInfo[item.fieldName] }}
						</view>
					</view>
				</view>
			</view>

			<view class="txt-container" v-if="suggestionInfo.allowComment == 1">
				<view class="title-container">
					满意度评价
				</view>
				<view class="content-txt-container form-container">
					<u-form labelWidth="80" labelPosition="left" :model="formData" :rules="rules"
						ref="hagdonGatherForm">
						<u-form-item label="" borderBottom prop="commentContent">
							<u-textarea maxlength="500" :count="true" v-model="formData.commentContent"
								placeholder="请输入评价内容"></u-textarea>
						</u-form-item>
						<u-form-item label="星级评价" borderBottom prop="commentLevel">
							<view class="comment-level-container">
								<view class="level-container">
									<u-rate @change="setCommentLevel" :count="5"
										v-model="formData.commentLevel"></u-rate>
								</view>
								<view class="button-container">
									<u-button class="submit-style button" text="立即评价" @click="submit"></u-button>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>


			<u-loading-page :loading="loading"></u-loading-page>
		</view>
	</page-container>
</template>

<script>
	import {
		getQueryHeaders,
		requestGet,
		requestPost
	} from "@/util/means/request";
	import {
		GET_SUGGEST_DETAIL,
		QUERY_NEWEST_SUGGEST,
		SUBMIT_SUGGEST,
		POST_SUBMIT_COMMENT
	} from "@/api/suggestion";
	import {
		getFileAccessHttpUrl
	} from "@/util/fileUtil";
	import userContainer from "@/components/userContainer/index.vue";
	import {
		successPagePath
	} from "@/util/publicConfig";
	import {
		baseMixins
	} from "@/util/baseMixins";

	export default {
		name: "index",
		mixins: [baseMixins],
		components: {
			userContainer
		},
		data() {
			return {
				suggestId: '',
				suggestionInfo: {},
				suggestionStatusInfo: [{
						label: '交办单位',
						fieldName: 'assignDepart'
					},
					{
						label: '承办单位',
						fieldName: 'mainDepart'
					},
					{
						label: '协办单位',
						fieldName: 'minorDepart'
					},
				],
				formData: {
					// 	评价内容
					commentContent: "",
					// 	星级评价
					commentLevel: 0,
					suggestId: ''
				},
				rules: {
					commentContent: {
						required: true,
						message: '请输入评价内容',
						trigger: ['blur', 'change']
					},
					// commentLevel: {
					//   required: true,
					//   message: '请选择星级',
					//   trigger: ['blur', 'change']
					// },
				},
				loading: false
			}
		},
		onLoad(params) {
			if (params.suggestId) {
				this.suggestId = params.suggestId
				this.formData.suggestId = this.suggestId
				this.getSuggestionInfo()
			}
		},
		methods: {
			setCommentLevel(commentLevel) {
				this.formData.commentLevel = commentLevel.toString()
				this.$refs.hagdonGatherForm.validateField('commentLevel')
			},
			submit() {
				this.loading = true;
				let owner = this
				this.$refs.hagdonGatherForm.validate().then(res => {
					requestPost({
						url: POST_SUBMIT_COMMENT,
						data: owner.formData,
						header: getQueryHeaders()
					}).then(res => {
						uni.$u.toast('添加成功');
						owner.redirectToPage(successPagePath)
					}).finally(() => {
						owner.loading = false
					})
					uni.$u.toast('评价成功');
					owner.redirectToPage(successPagePath)
					owner.loading = false
				}).catch(errors => {
					owner.loading = false
					uni.$u.toast('校验失败')
				})
			},
			getSuggestionInfo() {
				let owner = this
				this.loading = true
				requestGet({
					url: GET_SUGGEST_DETAIL,
					data: {
						suggestId: this.suggestId
					},
					header: getQueryHeaders()
				}).then(res => {
					owner.suggestionInfo = res
					owner.suggestionInfo.suggestInitiatorAvatar = owner.suggestionInfo.suggestInitiatorAvatar !=
						null && owner.suggestionInfo.suggestInitiatorAvatar !== '' ? getFileAccessHttpUrl(owner
							.suggestionInfo.suggestInitiatorAvatar) : '/static/img/avatar.png'
				}).finally(() => {
					owner.loading = false
				})
			}
		},
	}
</script>

<style scoped lang="scss" scoped>
	.suggestion-info-root {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		overflow: auto;
		box-sizing: border-box;

		.user-info-container,
		.txt-container {
			width: 100%;
			padding: 20rpx 30rpx 10rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 30rpx;
		}

		.user-info-container {}

		.txt-container {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: 30rpx;

			.title-container {
				width: 100%;
				padding-bottom: 20rpx;
				text-transform: none;
				border-bottom: 1rpx solid #C7C7C7;
				;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 600;
			}

			.content-txt-container {
				width: 100%;

				&.sub-list-container {
					display: flex;
					flex-direction: column;

					.sub-item {
						width: 100%;
						display: flex;
						padding: 20rpx 0;
						justify-content: flex-start;

						&:last-child {
							padding-bottom: 0;
						}

						.sub-title,
						.sub-value {
							font-family: Source Han Sans SC, Source Han Sans SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #686868;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.sub-title {
							width: 150rpx;
						}

						.sub-value {
							width: calc(100% - 150rpx);
							overflow: hidden;
							/* 隐藏超出的内容 */
							text-overflow: ellipsis;
							/* 添加省略号 */
							white-space: nowrap;
							/* 防止文本换行 */
						}
					}
				}

				.comment-level-container {
					display: flex;
					flex-direction: row;
					width: 100%;
					justify-content: space-between;

					.level-container {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
					}

					::v-deep .button-container {
						width: 45%;

						.button {
							margin-bottom: 20rpx;
							border-radius: 20rpx;

							&.submit-style {
								background: #AD2325;

								.u-button__text {
									font-size: 30rpx;
									color: #fff;
								}
							}

							&.cancel-style {
								border: 2rpx solid #AD2325;
								background: transparent;

								.u-button__text {
									font-size: 30rpx;
									color: #AD2325;
								}
							}
						}

					}
				}
			}
		}

	}

	.uni-textarea-textarea {
		height: 200rpx
	}
</style>